<template>
  <div class="index-console">
    <van-nav-bar title="请选择车位"/>
    <van-notice-bar
      left-icon="volume-o"
      :scrollable="false"
      text="温馨提示：绿色-可用 黄色-已预约 红色-已使用"
    />
    <van-row
      style="margin: 5px 0"
      justify="space-around"
    >
      <template
        v-for="(item, index) in legendList"
        :key="index"
      >
        <van-col span="6">
          <div class="legend-item">
            <van-icon
              name="label"
              :color="item.color"
              style="margin-right: 5px"
            />
            {{ item.text }} : {{ item.number }}
          </div>
        </van-col>
      </template>
    </van-row>
    <div class="index-body">
      <div class="body-left">
        <van-sidebar
          v-model="active"
          @change="changeActive"
        >
          <van-sidebar-item
            v-for="(item, index) in partitionList"
            :key="index"
            :title="item + '区'"
          />
        </van-sidebar>
      </div>
      <div class="body-right">
        <van-cell
          v-for="(element, order) in spotList"
          :key="order"
          :title="element.spotNumber"
          :class="`spot-status-${element.status}`"
          @click="chooseSpot(element)"
        />
        <van-back-top
          right="5%"
          bottom="80px"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getPartition, getSpotList, orderSpot } from '@/api/spot.js'
import { showNotify } from 'vant'
import { showConfirmDialog } from 'vant'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()


const active = ref(0)

const partitionList = ref([])

const listPartition = async () => {
  const res = await getPartition()
  if (res?.code === 0) {
    partitionList.value = res.data
  }
}

const spotList = ref([])

const loadSpotList = async (spotPrefix) => {
  const res = await getSpotList({ spotPrefix: spotPrefix })
  if (res?.code === 0) {
    let first = 0
    let second = 0
    let third = 0
    res.data.forEach((item) => {
      if (item.status === 0) {
        first++
      }
      if (item.status === 1) {
        second++
      }
      if (item.status === 2) {
        third++
      }
    })
    legendList.value[0].number = first
    legendList.value[1].number = second
    legendList.value[2].number = third
    spotList.value = res.data
  }
}

const changeActive = (val) => {
  loadSpotList(partitionList.value[val])
}

const legendList = ref([
  { text: '可用', color: '#07c160' },
  { text: '已预约', color: '#ffd01e' },
  { text: '已使用', color: '#ed6a0c' }
])

const spotOrder = async (spotId, userId) => {
  const res = await orderSpot({
    spotId: spotId,
    userId: userId
  })
  if (res?.code === 0) {
    if (res.data) {
      showNotify({ type: 'success', message: '预定成功，可以前往记录中查看...' })
      refreshTable()
    } else {
      showNotify({ type: 'danger', message: '请查看是否有未结束订单...' })
    }
  } else {
    showNotify({ type: 'danger', message: '请查看是否有未结束订单...' })
  }
}

const chooseSpot = (element) => {
  if (element.status === 0) {
    showConfirmDialog({
      title: '预约车位',
      message: `确定预约编号为${element.spotNumber}的车位吗？`
    })
      .then(() => {
        // on confirm
        spotOrder(element.id, userStore.userInfo?.id)
      })
      .catch((error) => {
        showNotify({ type: 'danger', message: error.message })
      })
  } else {
    showNotify({ type: 'warning', message: '当前车位已被预约或者占用,请选择其他车位...' })
  }
}

const refreshTable = async () => {
  await loadSpotList(partitionList.value[active.value])
}

onMounted(async () => {
  await listPartition()
  loadSpotList(partitionList.value[0])
})

</script>

<style scoped>
.index-console {
  width: 100%;

  .legend-item {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .index-body {
    width: 100%;
    display: flex;

    .body-left {

    }

    .body-right {
      width: 100%;

      /* 基础样式 */

      .van-cell {
        transition: background-color 0.3s; /* 添加过渡动画 */
      }

      /* 可用 - 浅绿色透明背景 + 对勾图标 */

      .spot-status-0 {
        background-color: rgba(76, 175, 80, 0.1); /* 10% 透明度的绿色 */
      }

      /* 已被预约 - 浅橙色透明背景 + 虚线边框 */

      .spot-status-1 {
        background-color: rgba(255, 152, 0, 0.1); /* 10% 透明度的橙色 */
      }

      /* 被占用 - 浅红色透明背景 + 禁用图标 */

      .spot-status-2 {
        background-color: rgba(244, 67, 54, 0.1); /* 10% 透明度的红色 */
      }
    }

  }
}
</style>